<template>
	<transition v-if='show_trans' enter-active-class='animated fadeIn detailFourMs'>
		<div class="common-gallery public-attribute">
			
			<gallery-header
				:GalleryAvatar='GalleryAvatar'
				:GalleryUser='GalleryUser'
				:GalleryFans='GalleryFans'
			>
			</gallery-header>
			
			<gallery-content
				:GalleryImgList='GalleryImgList'
			>
			</gallery-content>
			
			<gallery-footer></gallery-footer>
			
		</div>
	</transition>
</template>

<script>
	import axios from 'axios'
	import GalleryHeader from './components/Header'
	import GalleryContent from './components/Content'
	import GalleryFooter from './components/Footer'
	export default {
		name: 'picture-detail',
		components: {
			GalleryHeader,
			GalleryContent,
			GalleryFooter
		},
		data () {
			return {
				show_trans: false,
				GalleryAvatar: '',
				GalleryUser: '',
				GalleryFans: '',
				GalleryImgList: []
			}
		},
		methods: {
			getGalleryData () {
				var	_this = this
				axios({
					method: 'get',
					url: '/picture_lists/sepPicture?id=' + _this.$route.params.id
				})
				.then( response=> {
					if (response.data.status == 0) {
						var res = response.data.data[0]
						_this.GalleryAvatar = res.p_avatar
						_this.GalleryUser = res.p_user
						_this.GalleryFans = res.p_fans
						_this.GalleryImgList = res.p_img
						_this.show_trans = true
					}
				})
				.catch( error=> {
					console.log('REQUEST ERROR:' + error)
				})
			}
		},
		mounted () {
			this.getGalleryData()
		}
	}
</script>

<style lang="stylus" scoped>
	.common-gallery
		position:fixed
		top:0
		left:0
		right:0
		bottom:0
		z-index:999
		display:flex
		overflow:hidden
		background: #000
		flex-direction:column
		justify-content:center
</style>
